import React from 'react';
import styled from 'styled-components';
import Icon from './Icon';
import {useHistory} from 'react-router-dom';

const Header = styled.header`
  font-size: 20px;
  padding: 16px 16px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 22px;
`;

type Props = {
  value: string;
  rightIcon?: {
    name: string;
    onClick: () => void
  }
}

const TopBar: React.FC<Props> = (props) => {
  const history = useHistory();
  const onClickBack = () => {history.goBack();};

  return (
    <Header>
      <Icon name="left" onClick={onClickBack}/>
      <span>{props.value}</span>
      <Icon name={props.rightIcon?.name} onClick={props.rightIcon?.onClick}/>
    </Header>
  );
};

export {TopBar, Header};